<template>
  <el-dropdown @command="handleCommand">
    <span class="lang-icons">
      <img v-if="nowLanguage === 'zh_CN'" src="./img/zh_CN.png" />
      <img v-if="nowLanguage === 'en'" src="./img/en.png" />
      <img v-if="nowLanguage === 'zh_TC'" src="./img/zh_TC.png" />
    </span>
    <!-- <vui-icon class="text-white" icon="translate" /> -->
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh_CN">中文简体</el-dropdown-item>
        <el-dropdown-item command="zh_TC">中文繁體</el-dropdown-item>
        <el-dropdown-item command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
  import { defineComponent, computed } from 'vue'
  import { useStore } from 'vuex'
  import { useRoute } from 'vue-router'
  import getPageTitle from '@/utils/pageTitle'
  import i18n from '@commonProject/i18n'
  import { getUserInfo } from '@commonProject/api/user'
  import { getUrlSystemApp } from '@/utils/tools'
  export default defineComponent({
    name: 'VuiLanguage',
    setup() {
      const store = useStore()
      const route = useRoute()

      const changeLanguage = (language) => store.dispatch('user/setLanguage', language)
      const appId = computed(() => store.getters['user/appId'])
      const appCode = computed(() => store.getters['user/appCode'])
      const businessCode = computed(() => store.getters['user/businessCode'])
      const handleCommand = (language) => {
        changeLanguage(language)
        i18n.global.locale = language
        document.title = getPageTitle(route.meta.title)
        getUserInfo({
          appId: appId.value,
          appCode: appCode.value,
          language: language,
          datas: {
            token_reset: 'Y',
            ORG_ID: businessCode.value.ORG_ID,
          },
        }).then((res) => {
          store.dispatch('user/setToken', res.data.token)
          setTimeout(() => {
            location.reload()
          }, 100)
        })
        // 清除已缓存的Tab页
        sessionStorage.removeItem(`visitedRoutes_${getUrlSystemApp()}`)
      }
      const nowLanguage = computed(() => store.getters['user/language'])
      return {
        handleCommand,
        nowLanguage,
      }
    },
  })
</script>
<style>
  .lang-icons {
    width: 20px;
  }
  .lang-icons img {
    width: 20px;
    display: block;
  }
</style>
